<nz-spin [nzSpinning]="isLoading">
  <div nz-row [nzGutter]="24">
    <div nz-col nzMd="24" nzLg="24">
      <form nz-form [formGroup]="validateForm" (ngSubmit)="proSubForm()">
        <!-- 产品编码 -->
        <nz-form-item>
          <nz-form-label nzRequired [nzSm]="3" [nzXs]="24">
            {{ 'product' | translate }}{{ 'table.thead.code' | translate }}
          </nz-form-label>
          <nz-form-control [nzSm]="8" [nzXs]="12">
            <input
              [(ngModel)]="baseMaterialFileProduct.code"
              formControlName="code"
              nz-input
              placeholder="{{ 'placeholder' | translate }}"
              maxlength="10"
            />
            <nz-form-explain *ngIf="validateForm.get('code')?.dirty && validateForm.get('code')?.errors">
              {{ 'placeholder' | translate }}{{ 'product' | translate }}{{ 'table.thead.code' | translate }}
            </nz-form-explain>
          </nz-form-control>
          <!-- 名称 -->
          <nz-form-label nzRequired [nzSm]="3" [nzXs]="24">{{ 'Name' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="8" [nzXs]="12">
            <input
              [(ngModel)]="baseMaterialFileProduct.name"
              formControlName="name"
              nz-input
              placeholder="{{ 'placeholder' | translate }}"
              maxlength="10"
            />
            <nz-form-explain *ngIf="validateForm.get('code')?.dirty && validateForm.get('code')?.errors">
              {{ 'placeholder' | translate }}{{ 'Name' | translate }}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 排序   -->
        <nz-form-item>
          <nz-form-label [nzSm]="3" [nzXs]="24" nzRequired>{{ 'depart.sort' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="8" [nzXs]="12">
            <input
              [(ngModel)]="baseMaterialFileProduct.sort"
              formControlName="sort"
              nz-input
              maxlength="100"
              placeholder="{{ 'placeholder' | translate }}"
            />
            <nz-form-explain *ngIf="validateForm.get('sort')?.dirty && validateForm.get('sort')?.errors">
              {{ 'placeholder' | translate }}{{ 'milestone.serial.number' | translate }}
            </nz-form-explain>
          </nz-form-control>

          <!--  状态   0未启用    1启用  -->
          <nz-form-label nzRequired [nzSm]="3" [nzXs]="24">
            {{ 'depart.Whether.to.enable' | translate }}
          </nz-form-label>

          <nz-form-control [nzSm]="8" [nzXs]="12">
            <nz-switch
              [(ngModel)]="status"
              name="status"
              [ngModelOptions]="{ standalone: true }"
              nzCheckedChildren="{{ 'store.yes' | translate }}"
              nzUnCheckedChildren="{{ 'store.no' | translate }}"
            >
            </nz-switch>
          </nz-form-control>
        </nz-form-item>

        <!-- 产品属性  -->
        <nz-form-item>
          <nz-form-label nzRequired [nzSm]="3" [nzXs]="24">{{ 'property' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="8" [nzXs]="12">
            <nz-select
              nzShowSearch
              nzPlaceHolder="{{ 'select.please.choose' | translate }}"
              [nzDisabled]="false"
              [(ngModel)]="baseMaterialFileProduct.attribute"
              formControlName="attribute"
            >
              <!-- 1采购    2销售 --->
              <nz-option nzLabel="{{ 'select.please.choose' | translate }}" nzValue="" selected="selected"></nz-option>
              <nz-option nzLabel="{{ 'procurement' | translate }}" nzValue="1"></nz-option>
              <nz-option nzLabel="{{ 'sales' | translate }}" nzValue="2"></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="validateForm.get('attribute')?.dirty && validateForm.get('attribute')?.errors">
              {{ 'select.please.choose' | translate }}{{ 'product' | translate }}{{ 'property' | translate }}
            </nz-form-explain>
          </nz-form-control>
          <!-- 分类 -->
          <nz-form-label [nzSm]="3" [nzXs]="24" nzNoColon="true" nzRequired>
            {{ 'cost.item.category' | translate }}
          </nz-form-label>

          <nz-form-control [nzSm]="8" [nzXs]="12">
            <nz-tree-select
              nzAllowClear="false"
              [nzNodes]="materialTree"
              nzShowSearch
              nzPlaceHolder="{{ 'select.please.choose' | translate }}"
              [(ngModel)]="baseMaterialFileProduct.baseMaterialFileClassificationId"
              formControlName="baseMaterialFileClassificationId"
              (ngModelChange)="materialChange($event)"
            >
            </nz-tree-select>
            <nz-form-explain
              *ngIf="
                validateForm.get('baseMaterialFileClassificationId')?.dirty &&
                validateForm.get('baseMaterialFileClassificationId')?.errors
              "
            >
              {{ 'select.please.choose' | translate }}{{ 'product' | translate }}{{ 'cost.item.category' | translate }}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </form>
      <!-- 新增 模块 子表-->
      <div>
        <span id="modTitAdd" hidden="true">
          {{ 'button.add' | translate }}{{ 'customer.contacts.name' | translate }}
        </span>
        <span id="modTitUpdate" hidden="true">
          {{ 'table.update' | translate }}{{ 'customer.contacts.name' | translate }}
        </span>

        <!-- 按钮 -->
        <div nz-row nzGutter="24" style="margin-bottom:6px;">
          <div nz-col nzMd="24" nzLg="24">
            <button (click)="addRowMod()" style="margin-bottom:10px;" nz-button nzType="primary">
              {{ 'button.add' | translate }}
            </button>
          </div>
        </div>

        <!-- 模块 新增表 -->
        <div nz-row nzGutter="24">
          <div nz-col nzMd="18" nzLg="24">
            <nz-table
              nzSize="small"
              #basicTable
              [nzData]="modData"
              [nzFrontPagination]="false"
              [nzShowPagination]="false"
            >
              <thead>
                <tr>
                  <th style="width:150px;">{{ 'module.code' | translate }}</th>
                  <th style="width:150px;">{{ 'module.name' | translate }}</th>
                  <th style="width:150px;">{{ 'standard.quotation' | translate }}</th>
                  <th style="width:150px;">{{ 'table.operation' | translate }}</th>
                </tr>
              </thead>

              <tbody>
                <tr *ngFor="let data of basicTable.data">
                  <!-- 模块编码 -->
                  <td>
                    <input type="text" [(ngModel)]="data.code" nz-input maxlength="20" />
                  </td>
                  <!-- 模块名称 -->
                  <td>
                    <input type="text" [(ngModel)]="data.name" nz-input maxlength="20" />
                  </td>
                  <!-- 标准报价 -->
                  <td>
                    <nz-input-number
                      [(ngModel)]="data.standardQuotation"
                      [nzMin]="0"
                      [nzParser]="parserDollar"
                      [nzFormatter]="formatterDollar"
                      [nzMax]="100000000000000000"
                      [nzStep]="10"
                    ></nz-input-number>
                  </td>
                  <td>
                    <a
                      nz-popconfirm
                      nzTitle="{{ 'confirm.to.delete' | translate }}?"
                      nzOkText="{{ 'yes' | translate }}"
                      nzCancelText="{{ 'no' | translate }}"
                      (nzOnConfirm)="deleteMod(data)"
                    >
                      {{ 'table.delete' | translate }}
                    </a>
                  </td>
                </tr>
              </tbody>
            </nz-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</nz-spin>

<!-- 底部 -->
<div class="footer">
  <a
    nz-popconfirm
    style="margin-right: 2%"
    nzTitle="{{ 'pm.contract.contract.add.button.cancel' | translate }}"
    (nzOnConfirm)="close()"
  >
    <button nz-button>{{ 'button.close' | translate }}</button>
  </a>

  <button type="button" (click)="save('')" class="ant-btn ant-btn-primary">
    <span>{{ 'button.save' | translate }}</span>
  </button>
</div>
